import {
  _decorator,
  Component,
  Input,
  Label,
  Node,
  input,
  EventTouch,
  Vec2,
  v2,
  Vec3,
} from "cc";
const { ccclass, property } = _decorator;

@ccclass("levelGrid")
export class levelGrid extends Component {
  @property(Node)
  mainLoout: Node = null;
  //第几排
  @property(Number)
  path: number = 3;

  @property(Node)
  levelLoyout: Node = null;

  private _isMouseDown: boolean = false; // 鼠标是否按下

  private _lastMousePosition: Vec2 = Vec2.ZERO; // 上一次鼠标的位置

  private originalTouchDistance: number = 0; //两指按下去的初始距离

  private _isMove: boolean = false; // 是否移动

  jsonStr: string = `{
    "level1": {"status": true, "score": 1},
    "level2": {"status": false, "score": 2}
  }`;

  private levelMap: Map<String, levelData>;

  start() {
    this.genGrid();
  }

  update(deltaTime: number) {}

  onLoad() {
    // 注册鼠标事件监听
    input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);

    input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
    input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
  }

  onDestroy() {
    input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
    input.off(Input.EventType.TOUCH_END, this.onTouchEnd, this);
    input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
  }

  private onTouchStart(event: EventTouch) {
    this._isMouseDown = true;
    this._isMove = true;
    this._lastMousePosition = event.getLocation();
  }

  private onTouchEnd(event: EventTouch) {
    this._isMouseDown = false;
    this.originalTouchDistance = 0;
  }

  private onTouchMove(event: EventTouch) {
    if (!this._isMouseDown) return;
    if (!this._isMove) return;
    let touches = event.getAllTouches();
    //单点触控
    if (touches.length == 1) {
      // 计算触摸移动的距离
      const deltaMove = event.getLocation().subtract(this._lastMousePosition);
      // 更新上一次触摸的位置
      this._lastMousePosition = event.getLocation();
      console.log("deltaMove -- " + deltaMove);
      if (deltaMove.x > 0) {
        if (deltaMove.x >= 20 && this.path <= 10) {
          console.log("右边");
          this.path = this.path + 1;
          this.genGrid();
          this._isMove = false;
          return;
        }
      } else {
        if (deltaMove.x <= -20 && this.path > 1) {
          console.log("左边");
          this.path = this.path - 1;
          this.genGrid();
          this._isMove = false;
          return;
        }
      }
    }
  }

  private genMailLoyout() {}

  private genGrid() {
    let nodes = this.levelLoyout.children;
    let startIndex = 0;
    console.log("******222:" + this.jsonStr);
    let levelMap = JSON.parse(this.jsonStr);

    console.log("******:" + levelMap["level2"]);

    for (let node of nodes) {
      startIndex++;

      let level = startIndex + (this.path - 1) * 16;
      let flagStarIndex = `level` + level;
      //关卡
      let label = node.getChildByName("Label").getComponent(Label);
      label.string = level.toString();
      label.fontSize = 32;
      //星级
      let flag = node.getChildByName("flag_stars");
      flag.active = false;

      if (levelMap.hasOwnProperty(flagStarIndex)) {
        console.log("---> flagStarIndex " + flagStarIndex);
        flag.active = true;
        if (levelMap[flagStarIndex].hasOwnProperty("score")) {
          let score = levelMap[flagStarIndex]["score"];
          let star1 = flag.getChildByName("star1");
          let star2 = flag.getChildByName("star2");
          let star3 = flag.getChildByName("star3");
          if (score == 1) {
            star1.active = true;
            star2.active = false;
            star3.active = false;
          } else if (score == 2) {
            star1.active = true;
            star2.active = true;
            star3.active = false;
          } else if (score >= 3) {
            star1.active = true;
            star2.active = true;
            star3.active = true;
          } else {
            flag.active = false;
          }
        } else {
          flag.active = false;
        }
      } else {
        flag.active = false;
      }
    }
  }
}

// 定义接口描述 JSON 的结构
interface levelData {
  status: boolean;
  score: number;
}
